<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <style>
        img {
            width: 136px;
            height: 116px;
        }

        ul li {
            list-style: none;
            font-weight: 800;
            font-size: 17px;
        }
    </style>
</head>

<body>
    <h1>商品列表</h1>
    <input type="text" class="search_inp">
    <button class="search">搜索</button>
    <ul class="product_ul">
    </ul>

    <h1>购物车<button class="clear">清空购物车</button></h1>
    <input type="checkbox" class="all">
    <ul class="car_ul">
    </ul>
    <h1>总价￥：<span class="money">0</span><button class="account">结算</button></h1>
    <script>
        // 获取DOM
        var product_ul = document.querySelector('.product_ul')
        var car_ul = document.querySelector('.car_ul')
        var clear = document.querySelector('.clear')
        var search = document.querySelector('.search')
        var money = document.querySelector('.money')
        var all = document.querySelector('.all')
        var account = document.querySelector('.account')

        // 商品数据
        var product_list = [{
            id: 1,
            name: '衣服储物柜',
            price: '51.99',
            img: './O1CN01pmG1yc1Dt56HHGV61_!!2650710273.jpg'
        }, {
            id: 2,
            name: 'qopo新款手机',
            price: "476.00",
            img: './O1CN01dIG8tS1t1gqZb82Kb_!!1937825842.jpg'
        }, {
            id: 3,
            name: '沙发',
            price: '1380.00',
            img: './O1CN01XCV1hC1Y2y0Aooi4r_!!4075563002.jpg'
        }, {
            id: 4,
            name: '哈密瓜',
            price: '45.00',
            img: 'https://p1.ssl.qhimgs1.com/t015f9af233f6aaab67.jpg'
        }]

        // 购物车数据
        var car_list = []

        // 渲染商品
        function apply() {
            product_list.forEach(item => {
                product_ul.innerHTML += `<li>
            <img src="${item.img}">
            <span>${item.name}</span>
            <span>￥${item.price}</span>
            <button onclick="add(${item.id})">加入购物车</button>
        </li>`
            })
        }
        apply()

        // 渲染购物车
        function apply_car() {
            car_ul.innerHTML = ''
            car_list.forEach(item => {
                car_ul.innerHTML += `<li>
            <input type="checkbox" ${item.is ? 'checked' : ''} onclick="dan(${item.id})">
            <img src="${item.img}">
            <span>${item.name}</span>
            <span>￥${item.price}</span>
            <button onclick='jian(${item.id})'>-</button>
            <span>${item.num}</span>
            <button onclick='jia(${item.id})'>+</button>
            <button onclick='del(${item.id})'>删除</button>
        </li>`
            })
        }
        apply_car()

        // 加入购物车
        function add(id) {
            var a = product_list.find(item => item.id == id)
            car_list.push({
                id: a.id,
                name: a.name,
                price: a.price,
                img: a.img,
                num: 1,
                is: false
            })
            apply_car()
            zong()
        }

        // 数量加一
        function jia(id) {
            var a = car_list.findIndex(item => item.id == id)
            car_list[a].num++
            apply_car()
            zong()
        }

        // 数量减一
        function jian(id) {
            var a = car_list.findIndex(item => item.id == id)
            if (car_list[a].num != 0) {
                car_list[a].num--
            }
            apply_car()
            zong()
        }

        // 删除
        function del(id) {
            var i = car_list.findIndex(item => item.id == id)
            car_list.splice(i, 1)
            apply_car()
        }

        // 清空购物车
        clear.addEventListener('click', () => {
            car_list = []
            apply_car()
            zong()
        })

        // 搜索
        search.addEventListener('click', () => {
            var inp = document.querySelector('.search_inp').value
            var a = product_list.find(item => item.name == inp)
            product_ul.innerHTML =
                `
                    <li>
                        <img src="${a.img}">
                        <span>${a.name}</span>
                        <span>￥${a.price}</span>
                        <button onclick='add(${a.id})'>加入购物车</button>
                    </li>
                `
        })

        // 计算总价
        function zong() {
            var zong = 0
            car_list.forEach(item => {
                if (item.is) {
                    zong += item.price * item.num
                }
            })
            money.innerHTML = zong
        }
        // 全选反选
        all.onclick = function () {
            car_list.forEach(item => {
                item.is = this.checked
            })
            zong()
            apply_car()
        }

        // 单个价钱
        function dan(id) {
            var i = car_list.findIndex(item => item.id == id)
            car_list[i].is = event.target.checked
            zong()
        }

        // 结算
        account.addEventListener('click', () => {
            var dingdan = []
            car_list.forEach(item => {
                if (item.is) {
                    dingdan.push(item)
                }
            })
            localStorage.setItem('goods', JSON.stringify(dingdan))
            location.assign('./页面详情.html')
        })

    </script>
</body>

</html>